<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>作业查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-input2">
      <el-button size="mini" type="primary" @click="showZuoyeDetail = true"><span style="font-weight: bold">{{this.stuZuoyeInfo[0]}}</span>&emsp;{{this.stuZuoyeInfo[1]}}</el-button>
      <el-badge :value="this.commentInfo.length" class="item">
        <el-button size="mini" type="primary" @click="messageShow()">点评</el-button>
      </el-badge>
      <el-button size="mini" type="primary" @click="examZuoye()">返回上一页</el-button>
    </div>
    <el-dialog title="作业详情" class="dialog2" :show-close="false" :visible.sync="showZuoyeDetail">
      <span v-html="content"></span><br><br>
      <span>布置作业时间：{{this.stuZuoyeInfo[3]}}</span><br><br>
      <span>提交作业时间：{{this.stuZuoyeInfo[4]}}</span>
    </el-dialog>

    <div class="box-main2">
      <div class="box-tree">
        <el-tree class="el-trees" :data="treeData" :props="defaultProps"  @node-click="handleNodeClick">
        </el-tree>
      </div>

      <div class="box-view-zuoye" style="display: block;">
        <pre v-highlight>
          <code  style="display: block; font-size: 16px; font-weight: 400; width:fit-content" ></code>
        </pre>
      </div>
      <div class="box-message" v-show="boxMessageState">
        <div class="message-show">
          <div  v-if="commentInfo.length > 0">
            <p v-for="(comment,i) in commentInfo" :key="i">
               <b class="c2">崔老师（管理员）：</b><br>
              <span class="c1">{{comment.str_comment_date}}</span><br>
              <span class="c3" style="white-space: pre-line;">{{comment.comment_content}}</span><br>
              <el-button type="text" @click="openRevertMessage(comment)">回复</el-button>
              <el-button v-if="comment.user_noid == loginUserInfo.noid" type="text" @click="deleteCommentMessage(comment)">删除</el-button><br>
              <br>
              <span v-for="(revert,j) in comment.revertList" :key="j">
                <span class="c2">{{revert.realname}}</span><br>
                <span class="c1">{{revert.str_revert_date}}</span><br>
                <span class="c3" style="white-space: pre-line;">{{revert.revert_content}}</span><br>
                <el-button v-if="revert.user_noid == loginUserInfo.noid" type="text" @click="deleteRevertMessage(revert)">删除</el-button><br>
              </span>
            </p>

          </div>
        </div>
        <div class="message-input" v-if="_hasPermission(userPermissions, 'class_manage' || 'system_manage')">
          <el-input
            type="textarea"
            :rows="1"
            :cols="8"
            class="message-content"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
          <el-button size="mini" class="comment-btn" type="primary" @click="commentMsg()">发送</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import request from '@/common/utils/request';
  import PermissionHelper from "@/common/utils/PermissionHelper";
  import $ from 'jquery';
  import hljs from "highlight.js";
  import 'highlight.js/styles/a11y-light.css';

  export default {
    computed:{
      loginUserInfo() {
        return this.$store.state.loginUserInfo;
      },
      userPermissions(){
        return this.$store.state.userPermissions;
      },
      leftMenuStatus() {
        return this.$store.state.leftMenuStatus;
      },
      content(){
        if(this.stuZuoyeInfo[2]!=null){
          let arr = this.stuZuoyeInfo[2].split("");
          return arr.map((item) => {
            return item === "\n" ? "<br>" : item
          }).join("")
        }
      },
    },
    data() {
      return {
        textarea: '',
        inited: false,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        stuZuoyeInfo:[],
        showZuoyeDetail: false,
        boxMessageWidth:'',
        boxMessageState: false,
        commentInfo:[],
        realname:'',
        loginId:''
      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/zuoye_show') {
            this._initData();
            this.zuoye_title = this.$route.query.zuoye_title;
            this.student_realname = this.$route.query.student_realname;
          }

        }, immediate: true
      },
    },
    beforeRouteLeave(to, form, next) {
      this.inited = false;

      const el1 = document.querySelector('pre code')
      el1.innerHTML = '';
      next()
    },
    created() {
      window.setInterval(()=>{
        setTimeout(this.getCommentMsg(),0);
      },3000)
    },
    methods:{
      _hasPermission(allPermissions, searchPermission){
        return PermissionHelper.hasPermission(allPermissions,searchPermission);
      },
      handleNodeClick(data) {
        if(data.directory == 0 && data.url != null){
          let unicode = data.unicode;
          $.ajax({'url':data.url, headers:{'Content-Type':"text/plain;charset="+unicode}, dataType:"text",success: (d1r)=>{
              const el1 = document.querySelector('pre code')
              let highCode = hljs.highlightAuto( d1r ).value;
              el1.innerHTML = highCode;

            } });

        }

      },
      _initData(){
        if(this.inited){
          return;
        }
        this.inited = true;
        this.createZuoyeTree();
        this.getStudentZuoyeInfo();
        this.realname = this.loginUserInfo.realname;
      },
      messageShow(){
        this.$store.commit('doToggleLeftMenu');
        if(this.boxMessageState){
          this.boxMessageState = false;
        }else{
          this.boxMessageState = true;
        }
        this.getCommentMsg();
      },
      openRevertMessage(comment){
        this.$prompt('请输入回复的内容', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

        }).then(({ value }) => {
          let message_title = this.loginUserInfo.realname+"回复了你的:" + comment.message_title;
          let url = this.settings.apiUrl + "/student_zuoye/add_revert_msg";
          let d1 = {'user_noid': this.loginUserInfo.noid,
            'message_title':message_title,
            'revert_content': value,
            'comment_noid': comment.noid};
          request.post(url, d1).then((d1r => {
            if (d1r.code == 0) {
              this.getCommentMsg();
              this.$message({
                type: 'success',
                message: '回复成功',
              });
            }
          }))

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      deleteCommentMessage(comment){
        this.$confirm("您确定删除该评论吗","提示").then(() => {
          let url = this.settings.apiUrl + "/student_zuoye/del_commentMsg";
          let d1 = {'noid':comment.noid};
          request.post(url, d1).then((d1r => {
            if (d1r.code == 0) {
              this.getCommentMsg();
            }
          }))
        })
      },
      open2(id) {
        let _this = this;
        this.$notify({
          title: '消息通知',
          dangerouslyUseHTMLString: true,
          message: '<p style="cursor: pointer;">崔老师点评了你的作业，点击查看</p>',
          type: "warning",
          onClick() {
            // let id = _this.$route.query.id;
            _this.$router.push({path:'zuoye_show',query:{id:id}});
            _this.close();
          }
      })},
      deleteRevertMessage(revert){
        this.$confirm("您确定删除该评论吗","提示").then(() => {
          let url = this.settings.apiUrl + "/student_zuoye/del_revertMsg";
          let d1 = {'noid':revert.noid};
          request.post(url, d1).then((d1r => {
            if (d1r.code == 0) {
              this.getCommentMsg();
            }
          }))
        })
      },
      zuoyeDetail() {
        this.showZuoyeDetail = true;
      },
      getCommentMsg() {
        let url = this.settings.apiUrl + "/student_zuoye/get_comment";
        let d1 = {'comment_zuoye_noid':this.$route.query.id};
        request.post(url, d1).then((d1r => {
          if (d1r.code == 0) {
            this.commentInfo = d1r.data;
            // if (this.loginUserInfo.noid == this.loginId) {
            //   this.open2(d1.comment_zuoye_noid);
            // }
          }else{

            this.$alert('获取 用户信息失败：'+d1r.msg, '提示', {
              type: 'warning'

            });

          }
        }))
      },
      commentMsg() {
        let message_title = this.loginUserInfo.realname+"点评了你的:" + this.stuZuoyeInfo[1];
        let url = this.settings.apiUrl + "/student_zuoye/add_comment_msg";
        let d1 = {'user_noid': this.loginUserInfo.noid,
                  'message_title':message_title,
                  'comment_content': this.textarea,
                  'comment_zuoye_noid': this.$route.query.id};
        request.post(url, d1).then((d1r => {
          if (d1r.code == 0) {
            this.textarea = '';
            this.getCommentMsg();
            this.loginId = d1r.data;
          }else{

            this.$alert('获取用户信息失败：'+d1r.msg, '提示', {
              type: 'warning'
            });

          }
        }))
      },
      getStudentZuoyeInfo(){
        let url = this.settings.apiUrl + "/student_zuoye/zuoye_get";
        let d1 = {noid: this.$route.query.id};
        request.post(url, d1).then((d1r => {
          if (d1r.code == 0) {
            this.stuZuoyeInfo = d1r.data;
          } else{
            this.$alert('获取zuoye_get：'+d1r.msg, '提示', {
              type: 'warning'
            });
          }
        }))
      },
      examZuoye() {
        if(this.boxMessageState){
          this.boxMessageState = false;
        }
        this.$router.back(-1);
      },
      createZuoyeTree() {
        let url = this.settings.apiUrl + "/student_zuoye/zuoye_view";
        let d1 = {noid:this.$route.query.id};
        request.post(url,d1).then((d1r =>{
          if(d1r.code == 0){
            this.treeData = d1r.data;
          }else{
            this.$alert('获取zuoye_view：'+d1r.msg, '提示', {
              type: 'warning'
            });
          }
        }))
      },
    }



  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    display: flex;

  }

  .box-header2 {
    height: 30px;
    padding-left: 20px;
    padding-top: 8px;
  }
  .box-tree{
    width: 25%;
    height: 500px;
    display: flex;
    background-color: #fff;
    overflow: scroll;
  }

  .el-trees{
    height: 100%;
  }
  .box-view-zuoye{
    display: flex;
    margin-left: 15px;
    width: 70%;
    height: 500px;
    background-color: #fff;
    overflow: scroll;
  }
  .box-message{
    display: flex;
    width: 25%;
    background-color: #fff;
    margin-left: 15px;
    height: 500px;
    position: relative;
    overflow: scroll;
  }
  .box-input2{
    padding: 0 15px;
  }
  .box-message .message-input{
    width: 250px;
    padding: 2px;
    position: fixed;
    bottom: 2%;
  }
  .box-message .message-content{
    width: 70%;
    float: left;
    margin-left: 2px;
  }
  .box-message .message-input .comment-btn{
    margin: 3px 0px 0 5px;
  }
  .c1{
    color:red;
  }
  .c2{
    color: #13ce66;
  }
  .c3{
    color: #0CB1E6;
  }
</style>
